<template>
  <div class="title">
    <strong class="title_text" @click="clickTitle">{{ articleData.title }}</strong>
    <div class="title_info">
      <span>发布于
        <span class="title_info_date"> {{ articleData.publishTime }}</span>
      </span>
      <span style="margin: 0 10px">|</span>
      <span class="">分类于
        <span class="title_info_class" @click="toPath">{{
    articleData.cateName
          }}</span></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    articleData: {
      type: Object,
      default: () => {
        return {
          title: null,
          publishTime: null,
          cateName: null,
          content: null,
        };
      },
    },
  },
  // watch: {
  //   articleData(newVal) {
  //     console.log(newVal);
  //   },
  // },
  methods: {
    clickTitle() {
      this.$emit("clickTitle")
    },
    toPath() {
      console.log(this.articleData.cateId);
      const { cateId } = this.articleData;
      this.$router.push({ name: "BlogClassfiy", query: { cateId } });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  display: flex;
  flex-direction: column;
  align-items: center;

  &_text {
    width: 100%;
    text-align: center;
    font-size: 26px;
    font-weight: 400;
    margin: 10px 0 0;
    color: #555;
    cursor: pointer;
  }

  &_info {
    width: 100%;
    text-align: center;
    margin: 5px 0 15px;
    color: #999;
    font-size: 13px;

    &_date {
      border-bottom: 1px dashed #999;
    }

    &_class {
      color: #222;
      cursor: pointer;
      border-bottom: 1px solid #999;
    }
  }
}

@media screen and (max-width: 1200px) {

  .title {
    &_text {
      font-size: 24px !important;

    }

    &_info {
      margin: 10px 0;
    }
  }


}
</style>